<template>
	<div class="bigBox">
		<div class="search">
			<el-input v-model="search" placeholder="请输入搜索关键字"></el-input>
			<div class="searchTxt" @click="searchBtn('1')">搜索</div>
			<div class="btn">
				<el-button type="primary" icon="el-icon-circle-plus-outline">添加</el-button>
			</div>
		</div>
		<div class="main">
			<el-table :data="newList" height="90%" border style="width: 100%;margin-bottom:20px">
				<el-table-column prop="_id" label="菜谱编号" width="180" header-align="center" align="center"></el-table-column>
				<el-table-column prop="name" label="名称" width="180" header-align="center" align="center"></el-table-column>
				<el-table-column prop="image_src" label="缩略图" header-align="center" align="center">
					<template slot-scope="scope">
						<img :src="scope.row.coverpic" alt />
						<!-- <span @click="test(scope)">*********</span> -->
					</template>
				</el-table-column>
				<el-table-column prop="pageview" label="浏览量" header-align="center" align="center"></el-table-column>
				<el-table-column prop="collections" label="收藏量" header-align="center" align="center"></el-table-column>
				<el-table-column prop="isFree" label="是否免费" header-align="center" align="center">
					<template #default="scope">
						<span>{{ scope.row.isFree == 'Y' ? '是' : '否' }}</span>
					</template>
				</el-table-column>
				<el-table-column prop="isHot" label="是否热点" header-align="center" align="center">
					<template #default="scope">
						<span>{{ scope.row.isHot == 'Y' ? '是' : '否' }}</span>
					</template>
				</el-table-column>
				<el-table-column prop="ingredient" label="原料" header-align="center" align="center">
					<template slot-scope="scope">
						<div @click="LookIngredient(scope)" class="lookDiv">查看</div>
					</template>
				</el-table-column>
				<el-table-column prop="method" label="制作步骤" header-align="center" align="center">
					<template slot-scope="scope">
						<div @click="Lookmethod(scope)" class="lookDiv">查看</div>
					</template>
				</el-table-column>
				<el-table-column prop="address" label="操作" header-align="center" align="center">
					<!-- <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">
                        修改
					</el-button>-->
					<template slot-scope="scope">
						<el-button
							class="updateBtn"
							type="primary"
							size="mini"
							icon="el-icon-edit"
							@click="open(scope.row)"
						>修改</el-button>
					</template>
				</el-table-column>
			</el-table>
			<div class="block">
				<el-pagination
					@size-change="handleSizeChange"
					@current-change="handleCurrentChange"
					:current-page="newcurrentPage"
					:page-sizes="[3, 5, 6]"
					:page-size="3"
					layout="total, sizes, prev, pager, next, jumper"
					:total="total"
				></el-pagination>
			</div>
			<div class="modlDiv" v-if="LookIngredientState" style="height:470px">
				<div class="title">原料</div>
				<div class="foodDiv">
					<div class="foodName" v-for="item in Looks" :key="item.index">
						<span>食材：{{ item.name }}</span>
						<span>重量：{{ item.number }}</span>
					</div>
				</div>
				<!-- <el-form :label-position="labelPosition" label-width="80px" :model="formLabelAlign"> -->
				<div class="btnDiv">
					<el-button size="mini" type="danger" @click="guanbiIngredient">关闭</el-button>
				</div>
				<!-- </el-form> -->
			</div>
			<div class="modlDiv" v-if="LookmethodState" style="height:470px">
				<div class="title">步骤</div>
				<div class="foodImgDiv">
					<div class="foodimg" v-for="(item, index) in Looks" :key="index">
						<div class="numDiv">第{{ index + 1 }}步</div>
						<div class="txtDiv">{{ item.describe }}</div>
						<div class="numDiv">图例</div>
						<div class="txtDiv">
							<!-- {{ item.img }} -->
							<img :src="item.img" alt />
						</div>
					</div>
				</div>
				<!-- <el-form :label-position="labelPosition" label-width="80px" :model="formLabelAlign"> -->
				<div class="btnDiv">
					<el-button size="mini" type="danger" @click="guanbiIngredient">关闭</el-button>
				</div>
				<!-- </el-form> -->
			</div>
			<div class="modlDiv" v-if="updateMenuState" style="height:470px">
				<div class="title">修改</div>
				<el-form label-width="80px" :model="menusList">
					<el-form-item label="餐品_id">
						<el-input v-model="menusList._id" :value="menusList._id" disabled></el-input>
					</el-form-item>
					<el-form-item label="免费观看">
						<el-input v-model="menusList.isFree"></el-input>
					</el-form-item>
					<el-form-item label="热点商品">
						<el-input v-model="menusList.isHot"></el-input>
					</el-form-item>
					<el-form-item label="菜品名字">
						<el-input v-model="menusList.name"></el-input>
					</el-form-item>
					<el-form-item label="菜品时间">
						<el-input v-model="menusList.needtime"></el-input>
					</el-form-item>
					<div class="btnDiv">
						<!-- <el-button :plain="true" @click="open2">成功</el-button>
						<el-button :plain="true" @click="open3">警告</el-button>-->
						<el-button class="updateBtn" type="primary" size="mini" @click="updateBtnoK">确认</el-button>

						<el-button size="mini" type="danger" @click="updateBtnG">取消</el-button>
					</div>
				</el-form>
			</div>
		</div>
	</div>
</template>

<script>
import { createNamespacedHelpers } from "vuex";
const { mapState: mapRecipeList } = createNamespacedHelpers("recipesModules")//获取所有菜谱:steate
const { mapActions: mapGteAll } = createNamespacedHelpers("recipesModules")//获取所有菜谱:steate
const { mapActions: mapsearchMenu } = createNamespacedHelpers("recipesModules")//搜索菜谱
const { mapActions: mapmenuDetail } = createNamespacedHelpers("recipesModules")//菜谱详情
const { mapActions: mapupdateMenu } = createNamespacedHelpers("recipesModules")//菜谱修改
export default {
	data() {
		return {
			updateMenuState:false,
			search: '',
			pageSize: '3',
			currentPage: '1',
			total: 0,
			totalS: 0,
			totalA: 0,
			pages: 0,
			LookIngredientState: false,
			LookmethodState: false,
			Looks: [],
			menusList: {
				_id: "",
				isFree: "",
				isHot: "",
				name: "",
				needtime: ""
			}
		}
	},

	mounted() {
		console.log("进入菜谱界面");
		this.getAllRecipe();
		this.menuDetail({_id:"601fa488882000007800670d"});//菜谱详情
		

	},
	computed: {
		...mapRecipeList(["recipeList"]),
		newList() {
			return this.recipeList;
		},
		newcurrentPage() {
			// console.log("123");
			return parseInt(this.currentPage)
		},
	},
	methods: {
		...mapGteAll(["getAll"]),
		...mapsearchMenu(["searchMenu"]),
		...mapmenuDetail(["menuDetail"]),
		...mapupdateMenu(["updateMenu"]),

		//获取所有菜谱
		async getAllRecipe() {
			let res = await this.getAll({ pageSize: this.pageSize, currentPage: this.currentPage });
			// console.log(res)
			// console.log("总数--" + res.total, "--页数--" + res.pages)
			this.total = res.total
			this.totalA = res.total
			this.pages = res.pages
		},

		//搜索
		async searchBtn(currentPage = "1") {
			currentPage = currentPage || "1"
			// console.log("搜索函数",{ pageSize: this.pageSize, currentPage,val:this.search});
			console.log("搜索函数", currentPage);
			if (currentPage == "1") {
				console.log("**********************")
				this.currentPage = "1"
			}
			console.log(this.newcurrentPage);
			let res = await this.searchMenu({ pageSize: this.pageSize, currentPage, val: this.search });
			console.log("搜索结果总数--" + res.total, "--搜索结果页数--" + res.pages)
			this.total = res.total
			this.totalS = res.total
			this.pages = res.pages
		},
		// 修改
		open(s) {
			this.updateMenuState=true;
			console.log("修改函数");
			this.menusList._id = s._id;
			this.menusList.isFree = s.isFree;
			this.menusList.isHot = s.isHot;
			this.menusList.name = s.name;
			this.menusList.needtime = s.needtime;
			// console.log(this.menusList);
		},
		updateBtnoK(){
			this.updateMenuState=false;
			// console.log(this.menusList);
			this.updateMenu(this.menusList);//菜谱修改
			// console.log(this.pageSize);
			this.getAllRecipe();
		},
		updateBtnG(){
			this.updateMenuState=false;
		},
		// 查看
		LookIngredient(s) {
			// console.log(s.row.ingredient);
			this.LookIngredientState = true;
			this.Looks = s.row.ingredient;
		},
		Lookmethod(s) {
			// console.log(s.row.method);
			this.Looks = s.row.method;
			this.LookmethodState = true
		},
		guanbiIngredient() {
			this.LookIngredientState = false
			this.LookmethodState = false
			console.log();
		},
		// 分页
		handleSizeChange(val) {
			// console.log(`每页 ${val} 条`);
			this.pageSize = val;
			if (this.total == this.totalS) {
				this.searchBtn(val);
			} else {
				this.getAllRecipe();
			}
		},
		handleCurrentChange(val) {
			// console.log(`当前页: ${val}`);
			this.currentPage = val;

			// console.log(this.total, this.totalA, this.totalS)
			if (this.total == this.totalS) {
				this.searchBtn(val);
			} else {
				this.getAllRecipe();
			}
		}
	},
}
</script>

<style scoped lang="scss">
.bigBox {
	width: 100%;
	height: 93%;
	background-color: white;
	box-sizing: border-box;
	padding-top: 20px;
	padding-left: 20px;
	padding-right: 20px;
	.search {
		width: 495px;
		height: 40px;
		display: flex;
		position: relative;
		// background-color: yellowgreen;
		margin-bottom: 20px;
		.searchTxt {
			height: 100%;
			width: 80px;
			background-color: #158df9;
			display: flex;
			justify-content: center;
			align-items: center;
			color: white;
			border-radius: 0px 5px 5px 0px;
			position: absolute;
			right: 108px;
		}
		.el-input {
			width: 310px;
			height: 100%;
		}
		.btn {
			// margin-left: 10px;
			position: absolute;
			right: 0;
			.el-button--primary {
				background-color: #158df9;
			}
		}
	}
	.main {
		width: 100%;
		height: 90%;
		box-sizing: border-box;
		padding-right: 20px;
		background-color: white;
		.el-table {
			img {
				// width: 100%;
				height: 39px;
			}
			.updateBtn {
				background-color: #158df9;
				// width: 56px;
				// height: 28px;
				// color: white;
			}
			.lookDiv {
				cursor: pointer;
				color: #158df9;
				font-size: 700;
			}
		}
		.modlDiv {
			width: 600px;
			height: 360px;
			background-color: white;
			border-radius: 10px;
			box-shadow: 0px 0px 17px 1px #525151;
			box-sizing: border-box;
			padding: 20px;
			margin: auto auto;
			position: absolute;
			/* 确定元素的移动范围 */
			top: 0;
			left: 0;
			bottom: 0;
			right: 0;
			.title {
				margin-bottom: 30px;
				margin-left: 15px;
				width: 95%;
				border-bottom: 2px solid #525151;
				// background-color: yellowgreen;
				padding-bottom: 10px;
				text-align: center;
			}
			.el-input {
				width: 450px;
			}
			.btnDiv {
				width: 100%;
				display: flex;
				justify-content: center;
				box-sizing: border-box;
				padding-right: 30px;
				padding-top: 20px;
				position: absolute;
				bottom: 30px;
				.updateBtn {
					background-color: #158df9;
					// width: 56px;
					// height: 28px;
					// color: white;
				}
			}
			.foodDiv {
				width: 100%;
				// background-color: yellowgreen;
				overflow-y: auto;
				max-height: 300px;
				.foodName {
					width: 60%;
					height: 60px;
					max-height: 35px;
					display: flex;
					justify-content: center;
					align-items: center;
					// border: #e2e2e2 1px solid;
					border-bottom: #e2e2e2 1px solid;
					margin: 0 auto;
					span {
						// margin-bottom: 10px;
						margin-right: 30px;
					}
				}
			}
			.foodImgDiv {
				width: 100%;
				// background-color: yellowgreen;
				overflow-y: auto;
				max-height: 300px;
				display: flex;
				flex-direction: column;
				// margin-bottom: 20px;
				.foodimg {
					display: flex;
					align-items: center;
					flex-direction: column;
					img {
						width: 300px;
						height: 240px;
					}
					.numDiv {
						// background-color: red;
						margin-bottom: 10px;
					}
					.txtDiv {
						// background-color: gainsboro;
						margin-bottom: 10px;
					}
				}
			}
		}

		.block {
			width: 100%;
			display: flex;
			justify-content: flex-end;
		}
	}
}
</style>